<template>
  <div>
    <Top></Top>
    <el-row>
      <el-col :span="18" :offset="3">
        <template>
          <el-input
              placeholder="请输入商品编号"
              v-model="GoodsDTO.goodsNumber"
              style="width: 200px"
              clearable>
          </el-input>
          <el-button icon="el-icon-search" @click="getData(GoodsDTO.goodsNumber)" circle></el-button>
          <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="goodsName"
                label="商品名"
                width="">
            </el-table-column>
            <el-table-column
                prop="goodsNumber"
                label="商品编码">
            </el-table-column>
            <el-table-column
                prop="meteriType"
                label="物料">
            </el-table-column>
            <el-table-column
                prop="weight"
                label="重量">
            </el-table-column>
            <el-table-column
                prop="unitPrice"
                label="单价">
            </el-table-column>
            <el-table-column
                :min-width="140"
                label="数量">
              <template slot-scope="scope">
                <el-input-number size="mini" v-model="scope.row.quantity" @change="handleChange(scope)" :min="1"
                                 :max="99"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column
                label="小计">
              <template slot-scope="scope">
                {{ scope.row.quantity * scope.row.unitPrice * scope.row.weight }}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="1" :offset="20">
        <el-button type="success" @click="confirm()">生成需求单</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  data() {
    return {
      GoodsDTO: {
        "currentPage": 1,
        "size": 100,
        "value": this.value,
        "state": 0
      },
        DemandGoods: {
        "quantity": 0,
        "did": null,
        "gnum": null
      },  //temp -> demandGoods

      tableData: [],
      multipleSelection: [],
      DemandDetailsDTO: {
          goodsList:[]
      },
    }
  },
  components: {},
  getData: function () {

  },
  mounted: function () {
    this.getData()
  },

  methods: {
    getData: function () {
      this.$axios.post("goods/selectPageByCobdition", this.GoodsDTO).then(res => {
          console.log(res.data,"------------------")
        this.tableData = res.data.data.records
        this.page.total = res.data.data.total
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    confirm: function () {
      // 将勾选的商品传给下个页面
      this.multipleSelection.forEach((item)=>{
          this.DemandDetailsDTO.goodsList.push(item)
      })
      this.$axios.post("/purchase/buyDemand/insertDemand", this.DemandDetailsDTO).then(res => {
        this.$message.success("添加成功")
      })

      this.$router.push({
        name: "Detailneed", // 路由名字
        params: {
          carts: this.multipleSelection
        }
      })
    }
  }
}
</script>

<style scoped>

</style>


<!--
<template>
  <div>
    &lt;!&ndash; 查询条件 &ndash;&gt;
    <el-input
      placeholder="请输入商品编号"
      v-model="GoodsDTO.goodsNumber"
      style="width: 100px"
      clearable>
    </el-input>
    <el-button icon="el-icon-search" @click="getData(GoodsDTO.goodsNumber)" circle></el-button>
    <el-row>
      &lt;!&ndash; 表格数据 &ndash;&gt;
      <template>
        <div style="margin-top: 20px">
          <el-button @click="toggleSelection()">取消选择</el-button>
        </div>
        <el-table
          show-summary
          ref="multipleTable"
          :data="GoodsVO"
          tooltip-effect="dark"
          style="width: 100%"
          :summary-method="getSummaries"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="商品id"
            width="130">
            <template slot-scope="scope">{{ scope.row.id }}</template>
          </el-table-column>
          <el-table-column
            prop="goodsName"
            label="商品名"
            width="130">
          </el-table-column>
          <el-table-column
            prop="goodsNumber"
            label="商品编码"
          width="130">
            <template slot-scope="scope">{{ scope.row.gnum }}</template>
          </el-table-column>
          <el-table-column
            prop="meteriType"
            label="物料"
            width="130">
          </el-table-column>
          <el-table-column prop="quantity" label="数量" min-width="120px">
            &lt;!&ndash;表格数量默认为0&ndash;&gt;
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.quantity"
                :min="0"
                :max="99"
                label="数量"
                size="small"
                @change="handleChange(scope.row)"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            prop="weight"
            label="重量"
            width="130">
          </el-table-column>
          <el-table-column
            prop="unitPrice"
            label="单价"
            width="130">
          </el-table-column>
        </el-table>
        <el-button type="success" @click="add(scope)">成功按钮</el-button>
      </template>





      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
          layout="prev, pager, next,->"
          :page-count="page.total"
          :page-size="page.size"
          @current-change='changeCurPage'
        >
        </el-pagination>
      </div>
    </el-row>
  </div>

</template>
<script>

export default {
  SelectDemandDTO() {
    return {}
  },
  data() {
    return {
      GoodsDTO:{
        "currentPage": 1,
        "size": 10,
        "value": this.value,
        "state": ''
      },
      GoodsVO:{
        "quantity": 0,
        "gnum":0,
        "goodsNumber":null
      },
      value: '',
      table: false,
      SelectDemandVo: [],
      DemandDetailsList: [],
      SelectDemand: {},
      DemandDetails: {},
      SelectDemandDTO: {

      },

      page: {
        curPage: 1,
        size: 10,
        pageTotal: '',
        total: ''
      },
    }
  },
  mounted: function () {
    this.getData()
  },
  methods: {
    getData: function () {
      this.$axios.post("goods/selectPageByCobdition", this.GoodsDTO).then(res => {
        this.GoodsVO = res.data.data.records
        this.page.total = res.data.data.total
      })
    },
    handleSelectionChange(val) {
      var ids = [];
      this.selNum = val.length;
      for (var index in val) {
        ids.push(val[index].id);
      }
      for (var i in this.tableData) {
        if (ids.indexOf(this.tableData[i].id) != -1) {
          this.tableData[i].selected = 1;
        } else {
          this.tableData[i].selected = 0;
        }
      }
    },

    changeCurPage: function (val) {
      console.log('val:', val)
      this.SelectDemandDTO.current = val
      this.getData()
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
  }

}
</script>
<style scoped>

</style>
-->
